import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Dimensions,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { LineChart } from 'react-native-chart-kit';
import Icon from 'react-native-vector-icons/MaterialIcons';

const { width } = Dimensions.get('window');

const HomeScreen = ({ navigation }) => {
  const [totalBalance, setTotalBalance] = useState(12543.87);
  const [change24h, setChange24h] = useState(2.34);
  const [wallets, setWallets] = useState([
    { id: 1, symbol: 'BTC', name: 'Bitcoin', balance: 0.5234, value: 12450.32, change: 2.34, logo: '₿' },
    { id: 2, symbol: 'ETH', name: 'Ethereum', balance: 2.3456, value: 4567.89, change: -1.23, logo: 'Ξ' },
    { id: 3, symbol: 'USDT', name: 'Tether', balance: 1000, value: 1000, change: 0.01, logo: '₮' },
  ]);

  const chartData = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [
      {
        data: [12000, 12300, 12100, 12500, 12400, 12600, 12543],
        strokeWidth: 2,
      },
    ],
  };

  const chartConfig = {
    backgroundColor: '#1a1a2e',
    backgroundGradientFrom: '#1a1a2e',
    backgroundGradientTo: '#16213e',
    decimalPlaces: 0,
    color: (opacity = 1) => `rgba(76, 175, 80, ${opacity})`,
    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
    style: {
      borderRadius: 16,
    },
    propsForDots: {
      r: '6',
      strokeWidth: '2',
      stroke: '#4CAF50',
    },
  };

  return (
    <LinearGradient colors={['#1a1a2e', '#16213e']} style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
        <View style={styles.header}>
          <Text style={styles.greeting}>早上好</Text>
          <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
            <Icon name="account-circle" size={30} color="#fff" />
          </TouchableOpacity>
        </View>

        {/* Total Balance Card */}
        <LinearGradient
          colors={['#4CAF50', '#45a049']}
          style={styles.balanceCard}
        >
          <Text style={styles.balanceLabel}>总资产</Text>
          <Text style={styles.balanceAmount}>${totalBalance.toLocaleString()}</Text>
          <Text style={[
            styles.balanceChange,
            change24h >= 0 ? styles.positive : styles.negative
          ]}>
            {change24h >= 0 ? '+' : ''}{change24h}% (24h)
          </Text>
        </LinearGradient>

        {/* Quick Actions */}
        <View style={styles.quickActions}>
          <TouchableOpacity
            style={styles.actionButton}
            onPress={() => navigation.navigate('QRDeposit')}
          >
            <Icon name="qr-code" size={24} color="#4CAF50" />
            <Text style={styles.actionText}>存款</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.actionButton}>
            <Icon name="arrow-upward" size={24} color="#4CAF50" />
            <Text style={styles.actionText}>转账</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.actionButton}>
            <Icon name="swap-horiz" size={24} color="#4CAF50" />
            <Text style={styles.actionText}>交易</Text>
          </TouchableOpacity>
        </View>

        {/* Portfolio Chart */}
        <View style={styles.chartContainer}>
          <Text style={styles.sectionTitle}>资产走势</Text>
          <LineChart
            data={chartData}
            width={width - 40}
            height={200}
            chartConfig={chartConfig}
            bezier
            style={styles.chart}
          />
        </View>

        {/* Wallet List */}
        <View style={styles.walletContainer}>
          <Text style={styles.sectionTitle}>我的资产</Text>
          {wallets.map((wallet) => (
            <TouchableOpacity
              key={wallet.id}
              style={styles.walletItem}
              onPress={() => navigation.navigate('Portfolio', { walletId: wallet.id })}
            >
              <View style={styles.walletLeft}>
                <Text style={styles.walletLogo}>{wallet.logo}</Text>
                <View>
                  <Text style={styles.walletName}>{wallet.name}</Text>
                  <Text style={styles.walletSymbol}>{wallet.symbol}</Text>
                </View>
              </View>
              <View style={styles.walletRight}>
                <Text style={styles.walletValue}>${wallet.value.toLocaleString()}</Text>
                <Text style={[
                  styles.walletChange,
                  wallet.change >= 0 ? styles.positive : styles.negative
                ]}>
                  {wallet.change >= 0 ? '+' : ''}{wallet.change}%
                </Text>
              </View>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContent: {
    padding: 20,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  greeting: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
  },
  balanceCard: {
    borderRadius: 20,
    padding: 25,
    marginBottom: 20,
  },
  balanceLabel: {
    fontSize: 16,
    color: '#fff',
    opacity: 0.8,
  },
  balanceAmount: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#fff',
    marginVertical: 5,
  },
  balanceChange: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  positive: {
    color: '#4CAF50',
  },
  negative: {
    color: '#f44336',
  },
  quickActions: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 30,
  },
  actionButton: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 15,
    padding: 20,
    alignItems: 'center',
    width: '30%',
  },
  actionText: {
    color: '#fff',
    marginTop: 5,
    fontSize: 12,
  },
  chartContainer: {
    marginBottom: 30,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 15,
  },
  chart: {
    borderRadius: 16,
  },
  walletContainer: {
    marginBottom: 20,
  },
  walletItem: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 15,
    padding: 15,
    marginBottom: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  walletLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  walletLogo: {
    fontSize: 30,
    marginRight: 15,
  },
  walletName: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
  },
  walletSymbol: {
    fontSize: 14,
    color: '#a0a0a0',
  },
  walletRight: {
    alignItems: 'flex-end',
  },
  walletValue: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
  },
  walletChange: {
    fontSize: 14,
    fontWeight: 'bold',
  },
});

export default HomeScreen;
